<template>
	<view class="content">
		<u-sticky style="top:0px;">
			<view class="content-title">
				<u-list height="170rpx">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<u-cell center :border="false">
							<template #title>
								<view class="cell-title">
									<view class="cell-title-item">
										<text>HI~</text>
									</view>
									<view class="cell-title-item">
										<text>扯淡的生活</text>
									</view>
								</view>
							</template>
							<template #icon>
								<view style="margin-right: 20rpx;">
									<u--image width="120rpx" height="120rpx" :src="item.url" shape="circle" :fade="true"
										duration="450"></u--image>
								</view>
							</template>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
			<view class="content-info">
				<view class="content-info-sub">
					<text>1</text>
					<text style="font-weight: normal;color: gray;">收藏</text>
				</view>
				<view style="color: gray;">|</view>
				<view class="content-info-sub">
					<view style="position: relative;">
						<text>99</text>
						<u-badge :absolute="true" :offset="[0,-30]" type="error" :value="99"></u-badge>
					</view>
					<text style="font-weight: normal;color: gray;">优惠卷</text>
				</view>
			</view>
			<view class="content-account">
				<view class="content-account-sub">
					<view class="content-account-sub-info">
						<text style="font-size: 20rpx;">账户余额(元)</text>
						<text style="font-size: 40rpx;font-weight: bold;">1000000.00</text>
					</view>
					<view class="content-account-sub-cz">
						<view style="padding-right: 0rpx; display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
							<u-button style="width: 100px;background-color: white;color: #16ac85;font-weight: bold;"
							type="primary" shape="circle" :hairline="false" 
							text="立即充值" size="small"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="content-activity">
				<view class="content-activity-sub">邀请好友</view>
				<view class="content-activity-sub">技师招募</view>
			</view>
		</u-sticky>

		<view class="content-list">
			<view class="content-list-sub">
				<u-list style="height: 530rpx;" :scrollable="false">
					<u-list-item v-for="(item, index) in infoList" :key="index">
						<u-cell :icon="item.icon" center :border="false">
							<template #title>
								<view class="cell-title-item">
									<text>{{item.name}}</text>
								</view>
							</template>
							<template #right-icon>
								<u-icon name="arrow-right"></u-icon>
							</template>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [{
					url: "https://cdn.uviewui.com/uview/album/1.jpg"
				}],
				infoList: [{
						icon: "account",
						name: "关于我们",
						to: "",
					},
					{
						icon: "question",
						name: "意见反馈",
						to: "",
					},
					{
						icon: "edit-pen",
						name: "申诉",
						to: "",
					},
					{
						icon: "kefu-ermai",
						name: "联系客服",
						to: "",
					},
					{
						icon: "setting",
						name: "设置",
						to: "",
					},
				]
			}
		},
		onLoad() {},
		methods: {

		}
	}
</script>

<style scoped>
	.content {
		background-color: whitesmoke;
	}

	.content-title {
		/* background-color: aquamarine; */
		height: 250rpx;
		display: flex;
		flex-direction: row;
		padding-left: 20rpx;
		padding-right: 20rpx;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.cell-title {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-weight: bold;
	}

	.cell-title-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 5px;
		padding-top: 5px;
	}

	.content-info {
		display: flex;
		flex-direction: row;
		height: 100rpx;
		justify-content: flex-start;
		align-items: center;
		align-items: center;
		padding-left: 10rpx;
	}

	.content-info-sub {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 200rpx;
		font-weight: bold;
	}


	.content-account {
		/* background-color: aquamarine; */
		height: 150rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

	}

	.content-account-sub {
		width: 100%;
		height: 100%;
		background-color: #16ac85;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		display: flex;
		flex-direction: row;
		color: white;
	}

	.content-account-sub-info {
		padding-left: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content-account-sub-cz {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding-right: 60rpx;
	}

	.content-activity {
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		padding-left: 10rpx;
		padding-right: 15rpx;
		height: 120rpx;
	}

	.content-activity-sub {
		display: flex;
		flex: 1;
		margin-left: 10rpx;
		border-radius: 10rpx;
		background-color: aquamarine;
		align-items: center;
		justify-content: center;
		color: blueviolet;
		font-weight: bold;
	}

	.content-list {
		padding: 20rpx;
		height: 100%;
	}

	.content-list-sub {
		background-color: white;
		border-radius: 15rpx;
	}
</style>
